{extend name="index/index" /}
{block name="main"}

{css href="/static/index/reset.css"}

<div class="content-page">

    <div class="content">

        <div class="page-heading">
            <h1><i class='fa fa-table'></i>角色管理</h1>
            <h3>角色列表</h3></div>

        <div class="row">

            <div class="col-md-12">
                <div class="widget">
                    <div class="widget-header transparent">
                        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">搜索
                        </button>

                        <!-- Modal -->
                        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">

                                    <form action="{:url('admin/role/search')}" method="post">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" id="myModalLabel-search">搜索角色</h4>
                                        </div>
                                        <div class="modal-body">
                                            <span style="color: black;">角色名:<input type="text" name="search" placeholder="search..."></span>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                                            <button type="submit" class="btn btn-success">确定</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="widget-content">
                        <div class="table-responsive">
                            <table data-sortable class="table">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>角色列表</th>
                                    <th>说明</th>
                                    <th>拥有权限</th>
                                    <th>操作</th>
                                    {volist name='list' id='v'}
                                    <tr>
                                        <td>{$v.id}</td>
                                        <td>{$v.name}</td>
                                        <td>{$v.remark}</td>
                                        <td>
                                            {volist name="v.role" id="val"}
                                            <span>{$val}</span>
                                            &nbsp;
                                            {if condition="$i%2 == 0 "}<br>{/if}
                                            {/volist}
                                        </td>
                                        <td>
                                            <!--<a href="{:url('admin/role/edit',['id'=>$v['id']])}" class="btn btn-warning">修改</a>-->

                                            <button class="btn btn-warning up-btn" data-id="{$v.id}" data-toggle="modal" data-target="#myModal-edit">修改</button>
                                            <button class="btn btn-danger del-btn" data-id="{$v.id}">删除</button>
                                            <a href="{:url('admin/role/nodelist',['id'=>$v['id']])}" class="btn btn-success">分配权限</a>
                                        </td>
                                    </tr>
                                <!-- Modal 修改用户名-->
                                <div class="modal fade" id="myModal-edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel-role">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                <h4 class="modal-title" id="myModalLabel-role">修改角色名</h4>
                                                <input type="hidden" class="role" value="">
                                            </div>
                                            <form class="uprole1-btn" method="post">
                                                <div class="modal-body">
                                                    角色名:<input type="input" class="up-name" id="name" name="name" value="">
                                                </div>
                                                <div class="modal-body">
                                                    说明:<input type="input" class="up-remark" id="remark" name="remark" value="">
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                                                    <button type="button" uprole-id="{$v.id}" class="btn btn-success uprole-btn">确认</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <!-- end Modal -->
                                    {/volist}

                                </tr>
                                </thead>

                                <tbody>

                                </tbody>
                            </table>
                            {$data->render()}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Footer Start -->
        <!-- Footer End -->
    </div>
    <!-- ============================================================== -->
    <!-- End content here -->
    <!-- ============================================================== -->

</div>

{js href="/static/index/js/jquery.min.js"}

{js href="/static/index/js/toastr.min.js"}

<script>
    $(function () {
        // 触发删除用户
        $('.del-btn').click(function () {
            var id = $(this).attr('data-id');
            //                 console.log('删除操作,ID为: ' + ac_id);
            if (confirm('您确定要 [ 删 除 ] 该角色吗?')) {
                var obj = $(this).parents('tr');
                $.ajax({
                    type: 'delete',
                    url: '/admin/role/delete/id/' + id + '.html',
                    dataType : 'json',
                    success : function (data){
                        if (data.status) {
                            toastr.success(data.info);
                            obj.remove();
                        } else {
                            toastr.error(data.info);
                        }
                    },
                    error : function () {
                        alert('AJAX执行失败!');
                    }
                });
            }
        });
    });

    toastr.options = {
        closeButton: true,// 是否显示关闭按钮
        progressBar: true,// 实现显示计时条
        timeOut: "3000",// 自动关闭时间
        positionClass: "toast-bottom-left"// 提示位置
        // positionClass: "toast-top-full-width"// 提示位置
        // toast-top-full-width 顶端，宽度铺满整个屏幕
        // toast-top-right  顶端右边
    };

    //修改角色名-传递至
    $(function () {
        $('.up-btn').click(function () {
            var ac_id = $(this).attr('data-id');
            //             console.log('删除操作,ID为: ' + ac_id);
            $('.role').attr("value",ac_id);

            var info = 'id'+'='+ac_id;
            $.ajax({
                type : 'post',
                url : '/admin/role/edit/',
                data : info,
                dataType : 'json',
                success:function(data){
                    $('.up-name').val(data.name);
                    $('.up-remark').val(data.remark);
                },
                error : function () {
                    alert('AJAX执行失败!');
                }
            });
        });
    });

    //修改角色名
    $(function () {
        $('.uprole-btn').click(function () {
            var id = $('.role').val();
            //             console.log('删除操作,ID为: ' + ac_id);
            var name = $('.up-name').val();
            var remark = $('.up-remark').val();
            uproleAjax(id,name,remark);
        });
    });
    function uproleAjax(id,name,remark){
        var info = 'id'+'='+id + '&' + 'name=' + name + '&' + 'remark=' + remark;
        $.ajax({
            type : 'post',
            url : '/admin/role/update/',
            data : info,
            dataType : 'json',
            success:function(data){
                if(data.status){
                    toastr.success(data.info);
                    setTimeout(function (){window.location.reload();},1000);

                }else{
                    toastr.error(data.info);
                }
            },
            error : function () {
                alert('AJAX执行失败!');
            }
        });
    }
</script>


{/block}
